<template>
  <el-card>
    <div class="page-header">
      <!-- 注意
        1.当前组件左右标签结构都不确定，所以用插槽技术解决
          因为有两处不确定，需要给slot取名(添加name属性来区分)
        2.左右内容不一定有需要显示，只有使用组件的时候，给left和right插槽分发了
          标签了，才需要展示内容，这里借助里面$slots和v-if指令配合做条件渲染
          ！！！知识点：$dlotd可以获取到组件的所有插槽内容
        3.v-if不能加给类名为left和right的div上，这样可能会破坏左右布局，影响排版
      -->
      <!-- 左侧内容 -->
      <div class="left">
        <div class="content1" v-if="$slots.left">
          <el-icon name="info" style="line-height: 28px" />
          <slot name="left" />
        </div>
      </div>
      <!-- 右侧内容 -->
      <div class="right">
        <div class="content" v-if="$slots.right">
          <slot name="right" />
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "PageHeader",
};
</script>

<style lang="scss" scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-content: center;
  height: 35px;
  line-height: 35px;
}
.content1 {
  display: flex;
  justify-content: space-evenly;
  align-content: center;
  width: 130px;
  height: 32px;
  border: 1px #b3e2ff solid;
  background: #e6f7ff;
  border-radius: 5px;
  font-size: 13px;
  line-height: 32px;
  .el-icon-info {
    color: #409eff;
  }
}
</style>